<script lang="ts" setup>
import QuillMent from '@/components/quillMent.vue';
import {companyInfoGetListSerive,companyInfoUpdateSerive} from '@/api/company.js'
import {ref} from 'vue'
const quill = ref()
const name = ref('')
const content = ref<string>('')
const content1 = ref<string>('')
const content2 = ref<string>('')
const content3 = ref<string>('')
const content4 = ref<string>('')
const content5 = ref<string>('')

interface ListItem {
  id:number
  content:string
}
const List = ref<ListItem[]>([])
const getList = async()=>{
  const res = await companyInfoGetListSerive()
  List.value = res.data.data
  content1.value = List.value[0]?.content || ''
  content2.value = List.value[1]?.content || ''
  content3.value = List.value[2]?.content || ''
  content4.value = List.value[3]?.content || ''
  content5.value = List.value[4]?.content || ''   
}
getList()
const changeName  = async()=>{
  await companyInfoUpdateSerive({
    name:'公司名称',
    content1,
  })
  
}

const changeInformation = ()=>{
  name.value='公司介绍'
  content.value = content2.value
  quill.value.open()
}
const changeArchitecture = ()=>{
  name.value='公司架构'
  content.value = content3.value
  quill.value.open()
}
const changeStrategy = ()=>{
  name.value='公司战略'
  content.value = content4.value
  quill.value.open()
}
const changeCurrent = ()=>{
  name.value='现任高层'
  content.value = content5.value
  quill.value.open()
}
</script>

<template>
    <div class="wrapped">
       
            <div class="commpany-content">

                <el-form>
                <el-form-item label="公司名称:">
                 <el-input  v-model="content1"/>
                 <el-button type="primary" @click="changeName">修改公司名称</el-button>
                </el-form-item>
                <el-form-item label="公司介绍:">
                 <el-button type="primary" @click="changeInformation">编辑公司介绍</el-button>
                </el-form-item>
                <el-form-item label="公司架构:">
                 <el-button type="primary" @click="changeArchitecture">编辑公司架构</el-button>
                </el-form-item>
                <el-form-item label="公司战略:">
                 <el-button type="primary" @click="changeStrategy">编辑公司战略</el-button>
                </el-form-item>
                <el-form-item label="现任高层:">
                 <el-button type="primary" @click="changeCurrent ">编辑现任高层</el-button>
                </el-form-item>
                </el-form> 
                
                
    </div>
    <QuillMent ref="quill" :name="name" :content="content"/>
     </div>
</template>

<style lang="scss" scoped>
.wrapped{
        height: 530px;
.el-form{
  .el-form-item{
    .el-input{
      width: 200px;
    }
    .el-button{
      margin: 0 20px;
    }            
   
  }
}
}
</style>